<template>
  <div>
    <div>
   
  </div>

    <div style="width: 40%; margin-top: 20px;">
        <el-input placeholder="输入医院名称" v-model="input">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
  </el-input></div>
    <div class="block" style="margin-left: -70%; margin: 20px 0px 20px -900px;">
    <span class="demonstration">创建日期：</span>
    <el-date-picker
      v-model="value"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>
    <el-button @click="chax" type="primary">查询</el-button>
  </div>
  
  <div style="float: left;">
    <el-button @click="addHos" type="primary">新增医院</el-button>
    <!-- <el-button type="primary" >导出医院</el-button> -->
  </div>
  
    <div style=" width: 100%;float: left;background-color: #E4F2FF; border: 1px solid #6AB7FE; margin: 10px 0px; height: 40px; line-height: 40px;"><i class="el-icon-user-solid" style="color: #6AB7FE; line-height: 40px;"></i><label style="font-size: 14px;"> 医院总数：{{ pageInfo.total }}</label></div>
    <el-table
      ref="pageInfo.list"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="hname" label="医院名称" width="auto" > </el-table-column>
      <el-table-column prop="manager.hname" label="医院负责人" width="auto"> </el-table-column>
      <el-table-column prop="account" label="医院银行卡号" width="auto"></el-table-column>
      <el-table-column prop="gain" label="医院总收益" width="auto"></el-table-column>
      <el-table-column prop="account" label="医院地址" width="auto">
        <template slot-scope="scope">
            <label>{{ scope.row.province }}</label>
            <label>{{ scope.row.city }}</label>
            <label>{{ scope.row.district }}</label>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" width="auto"></el-table-column>
      <el-table-column prop="address" label="操作" width="auto">
        <template slot-scope="scope">
            
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
            
            <el-popconfirm title="确定删除吗？" @confirm="delHos(scope.row.id)">
                <el-button type="danger"  slot="reference" icon="el-icon-delete" circle></el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pageInfo.pageSize" @current-change="search">
    </el-pagination>
     <!-- 添加模态框开始 -->
     <el-dialog title="添加医院" :visible.sync="addVisable">
      <el-form ref="form" :model="form" label-width="100px">
  <el-form-item label="医院名称">
    <el-input v-model="form.hname"></el-input>
  </el-form-item>
  <el-form-item label="医院地址">
    <el-cascader
      size="large"
      :options="pcaTextArr"
      v-model="selectedOptions"
      @change="selAddress">
    </el-cascader>
  </el-form-item>
  <el-form-item label="医院银行卡号">
    <el-input v-model="form.account"></el-input>
  </el-form-item>
  <el-form-item label="医院负责人">
    <el-select v-model="form.beiyong1" placeholder="请选择医院负责人">
      <el-option
              v-for="m in hosMans"
              :key="m.id"
              :label="m.hname"
              :value="m.id"
            >
            </el-option>
    </el-select>
  </el-form-item>
  
  
  
</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisable=false">取 消</el-button>
        <el-button type="primary" @click="saveAddHos">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加模态框结束 -->
     <!-- 修改模态框开始 -->
     <el-dialog title="修改" :visible.sync="updateVisable">
      <el-form ref="editForm" :model="editForm" label-width="100px">
  <el-form-item label="医院名称">
    <el-input v-model="editForm.hname"></el-input>
  </el-form-item>
  <el-form-item label="医院地址">
    <el-cascader
      size="large"
      :options="pcaTextArr"
      v-model="editOptions"
      @change="selEditAddress">
    </el-cascader>
  </el-form-item>
  <el-form-item label="医院银行卡号">
    <el-input v-model="editForm.account"></el-input>
  </el-form-item>
  <el-form-item label="医院负责人">

    <el-select v-model="editForm.beiyong1" placeholder="请选择医院负责人" >
      <el-option
              v-for="m in hosMans"
              :key="m.id"
              :label="m.hname"
              :value="m.id"
              
            >
            </el-option>
    </el-select>
  </el-form-item>
  
  
  
</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateVisable=false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框结束 -->
  </div>
</template>
  
  <script>
import { getHos ,refDel, selMans,addSave, updSave} from '../api/HospitalInfo';
import { pcaTextArr} from "element-china-area-data";
export default {
  data() {
    return {
      pageInfo:{
        pageNum:1
      },
      input:"",
      value:[],
      addVisable:false,
      updateVisable:false,
      form:{},
      pcaTextArr,
      selectedOptions: [],
      hosMans:[],
      editForm:{manager:""},
      editOptions:[]
    };
  },

  methods: {
    saveEdit(){
      updSave(this.editForm).then(res=>{
        if(res.data.code == 200){
          this.updateVisable = 0
          this.$message.success('修改成功')
            this.search()
        }
      })
    },
    selEditAddress(){
      this.editForm.province = this.editOptions[0]
      this.editForm.city = this.editOptions[1]
      this.editForm.district = this.editOptions[2]
    },
    edit(row){
      this.editOptions = []
      selMans().then(res=>{
          this.hosMans = res.data.data
        })
      this.updateVisable = 1
      this.editForm = row
      this.editOptions[0] = row.province
      this.editOptions[1] = row.city
      this.editOptions[2] = row.district
      
      console.log(this.editOptions);
    },
    selAddress(){
      this.form.province = this.selectedOptions[0]
      this.form.city = this.selectedOptions[1]
      this.form.district = this.selectedOptions[2]
    },
    saveAddHos(){
      addSave(this.form).then(res=>{
        if(res.data.code == 200){
            this.addVisable = 0
            this.$message.success('添加成功')
            this.search()
        }
      })
    },
    handlerChaneg(){
      console.log(this.selectedOptions);
    },
    delHos(row){
        refDel(row).then(res=>{
            if(res.data.code == 200){
                this.$message.success('删除成功')
                this.search()
            }else{
                this.$message.error('删除失败')
            }
        })
    },
    addHos(){
        selMans().then(res=>{
          this.hosMans = res.data.data
        })
        this.form={}
        this.selectedOptions=[]
        this.addVisable = true
    },
    search(){
        getHos({
            pageNum:this.pageInfo.pageNum,
            input:this.input,
            dateArr:this.value
        }).then(res=>{
            this.pageInfo = res.data.data
            this.search = ""
        })
    },
    chax(){
        console.log(this.value,this.input,this.pageInfo);
        this.search()
    },
    handleCurrentChange(val){
        console.log("当前第" + val);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  mounted() {
    this.search()
  },
};
</script>